<template>
  <div>
    <x-header id="header" :left-options="{backText: ''}">找回密码</x-header>
    <div class="main-header">
      <div class="weui-cells_form">
        <group gutter="0">
          <x-input placeholder="请输入手机号码" class="input"  mask="99999999999" is-type="china-mobile"  :max="11" v-model="mobile">
            <div class="input-label" slot="label">手机号码</div>
          </x-input>
          <x-input placeholder="请输入验证码" :show-clear="false" class="input" mask="999999"  :max="6" v-model="VCCode">
            <div class="input-label" slot="label">验证码</div>
            <x-button class="rl-verification" plain slot="right" type="primary" mini @click.native="receiveVerificationCode">{{VCText}}</x-button>
          </x-input>
          <x-input placeholder="请输入登录密码" class="input" type="password"  v-model="pwd1">
            <div class="input-label" slot="label">登录密码</div>
          </x-input>
          <x-input placeholder="请输入重复密码" class="input" type="password" v-model="pwd2">
            <div class="input-label" slot="label">重复密码</div>
          </x-input>
        </group>
      </div>
      <div class="save">
        <x-button class="save-button" @click.native="editPasswordHandle">确认</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSms, forgetPassword  } from '@/api/user'
import { isPhoneNumber } from '@/libs/util'

export default {
  name: 'password',
  components: {
  },
  data () {
    return {
      mobile: '',
      VCCode: '',
      pwd1: '',
      pwd2: '',
      VCText: '获取验证码'
    }
  },
  methods: {
    editPasswordHandle() {
      if(!isPhoneNumber(this.mobile)) {
        this.$vux.toast.show({
          text: '手机号有误',
          type: 'cancel'
        })
        return
      } else if (!this.VCCode) {
        this.$vux.toast.show({
          text: '请输入验证码',
          type: 'cancel'
        })
        return
      } else if (this.pwd1.length < 6) {
        this.$vux.toast.show({
          text: '密码密码过短',
          type: 'cancel'
        })
        return
      } else if (this.pwd1 !== this.pwd2) {
        this.$vux.toast.show({
          text: '密码不一致',
          type: 'cancel'
        })
        return
      } else {
        forgetPassword({mobile:this.mobile,password: this.pwd1,code:this.VCCode}).then(() => {
          this.$vux.toast.show({
            text: '修改成功',
            type: 'success'
          })
          setTimeout(() => {
            this.$router.push({name:'registrationLogin'})
          })
        })
      }
    },
    receiveVerificationCode() {
      if (typeof this.VCText === 'number') {
        this.$vux.toast.text('请稍后点击')
      } else {
        if(!isPhoneNumber(this.mobile)) {
          this.$vux.toast.show({
            text: '手机号有误',
            type: 'cancel'
          })
          return
        } else {
          sendSms(parseInt(this.mobile)).then(() => {
            this.$vux.toast.show({
              text: '验证码已发送',
              type: 'success'
            })
            this.VCText = 60
            this.timer = setInterval(
              () => {
                if (this.VCText > 0) {
                  this.VCText--
                } else {
                  this.VCText = '获取验证码'
                  clearInterval(this.timer)
                }
              },
              1000)
          })
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
